<template>
  <div class="comment">
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>信息管理</el-breadcrumb-item>
      <el-breadcrumb-item>修改信息</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 白板 -->
    <el-card >
      <el-form>
        <el-form ref="user" :model="user" :rules="userRule" label-width="80px">
          <el-row>
            <el-col :span="10">
              <el-form-item label="账号" >
                <el-input v-model="user.userName"  :disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="昵称" prop="nickName">
                <el-input type="text" v-model="user.nickName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="2" :offset="1"> 
              <el-image
                style="width: 100px; height: 100px"
                :src="user.iconUrl"
                fit="scale-down">
              </el-image>
            </el-col>
            <el-col :span="9" :offset="2">
              <el-upload
                ref="upload"
                action="http://127.0.0.1:8090/image"
                list-type="picture-card"
                :limit="1"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :on-success="handleSuccess">
                <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="picVisible">
                <img width="100%" :src="user.iconUrl" alt="">
                </el-dialog>
            </el-col>
          </el-row>
          <el-form-item label="手机号码" prop="phone">
            <el-input type="text" v-model="user.phone" class="inputStyle"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input type="text" v-model="user.email" class="inputStyle"></el-input>
          </el-form-item>
          <el-form-item label="地址" prop="address">
            <el-input type="text" v-model="user.address" class="inputStyle"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit('user')">修改信息</el-button>
          </el-form-item>
        </el-form>


      </el-form>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    var isMobileNumber= (rule, value, callback) => {
    if (!value) {
          return new Error("请输入电话号码");
        } else {
          const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
          const isPhone = reg.test(value);
          value = Number(value); //转换为数字
          if (typeof value === "number" && !isNaN(value)) {//判断是否为数字
          value = value.toString(); //转换成字符串
            if (value.length < 0 || value.length > 12 || !isPhone) { //判断是否为11位手机号
              callback(new Error("手机号码格式如:138xxxx8754"));
            } else {
              callback();
            }
          } else {
            callback(new Error("请输入电话号码"));
          }
        }
      };
    return {
      user:{
        userName:"",
        nickName:"",
        phone:"",
        email:"",
        iconUrl:"",
        address:"",
      },
      
      picVisible:false,
      userRule:{
        nickName: [
          { required: true, message: "请输入昵称", trigger: "blur" },
           { min: 1, max: 20, message:"请输入1-20个字符",trigger: "blur" },
        ],
        phone: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          { validator: isMobileNumber, trigger: "blur" },
        ],
         email: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ],
      },
    };
  },
methods: {
  handleRemove(file) {
    this.$http.delete("image",{
      params:{
        realPath:file.response.data.realPath,
      }
    });
    this.$message({
      type:"success",
      message: "图片删除成功"
    });
  },
    
  handlePictureCardPreview(file) {
    this.picVisible = true;
  },
  handleSuccess(response){
    this.user.iconUrl="http://127.0.0.1:8090/"+response.data.imageUrl;
  },
  async getUserInfo(id){
  var d=await this.$http("user/"+window.sessionStorage.getItem("token"))
    this.user=d.data
  },
  onSubmit(formName) {
    this.$refs[formName].validate( valid=>{
        this.$confirm('此操作将永久修改个人信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        if(valid){
          var d=await this.$http.put('user',this.user);
          if(d.code==200){
            this.$message({
              type:"success",
              message:d.message
            });
          }
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消修改'
        });          
      });
    })
  },
},
mounted: function () {
    this.getUserInfo()
  },
};
</script>
<style scoped>
.inputStyle{
  width:50%
}
</style>